会议室预定系统：Google 账号登录前端开发

上节实现了 Google 账号登录的后端代码，这节在前端代码里调用下就好了。

在登录框下加个 google 账号登录的按钮。

改下 Login.tsx

<Form.Item {...layout2}>
    <div>
        <a
            href="#"
            onClick={() => {
                window.location.href = "http://localhost:3005/user/google";
            }}>
            Google 账号登录
        </a>
    </div>
</Form.Item>

点击的时候跳转 google 登录页面。

试一下：

跳转没问题。

再看下 cookie：

也没问题。

接下来只需要在首页处理下 cookie，同步登录状态就好了。

那怎么同步登录状态呢？

看下之前的登录流程：

登录后再 localStorage 里保存了 access_token、refresh_token、user_info 这三个信息，这就是保存了登录状态了。

那现在只要判断下有这三个 cookie，就把它设置到 localStorage，然后刷新下页面不就好了？

安装下操作 cookie 的包：

npm install --save js-cookie
npm i --save-dev @types/js-cookie

然后在 Index 组件里写下逻辑：

useEffect(() => {
    const userInfo = cookies.get("userInfo");
    const accessToken = cookies.get("accessToken");
    const refreshToken = cookies.get("refreshToken");

    if (userInfo && accessToken && refreshToken) {
        localStorage.setItem("user_info", userInfo);
        localStorage.setItem("access_token", accessToken);
        localStorage.setItem("refresh_token", refreshToken);

        cookies.remove("userInfo");
        cookies.remove("accessToken");
        cookies.remove("refreshToken");
    }
}, []);